import { Video, View } from "@tarojs/components";
import { Close, Cross, GoodJob, More, Share } from "@taroify/icons";
import { useEffect, useState } from "react";
import Taro, { VideoContext } from "@tarojs/taro";
import { uuid } from "@/utils";
import UserTag from "../user/UserTag";

interface CommentProps {
  handle: (key, value) => void;
  className?: string;
}

export default ({ handle, className }: CommentProps) => {
  const [progress, setProgress] = useState<string | number>(1);

  const tags = [
    {
      num: "100",
      component: <GoodJob size={30} />,
    },
    {
      num: "100",
      component: <More size={30} />,
      handle: () => handle("comment", true),
    },
    {
      num: "100",
      component: <Share size={30} />,
    },
  ];

  const videoId = uuid();

  const query = Taro.createSelectorQuery();
  const video = query.select("#" + videoId);

  // function toggleVideo() {
  //   console.log(video);
  //   if (video && video.context) {
  //     video
  //       .context((res) => {
  //         if (play) {
  //           res.context.pause();
  //           setPlay(false);
  //         } else {
  //           res.context.play();
  //           setPlay(true);
  //         }
  //       })
  //       .exec();
  //   }
  // }
  return (
    <View
      // onClick={toggleVideo}
      className={className + "relative "}
    >
      <View className=" absolute z-10 right-5 bottom-8 flex flex-col justify-center items-center gap-4">
        {tags.map((tag) => (
          <View
            key={tag.num}
            className="flex justify-center items-center flex-col"
            onClick={tag.handle}
          >
            {tag.component}
            <View>{tag.num}</View>
          </View>
        ))}
      </View>
      <View className="absolute bottom-4 inset-x-0">
        <View className="px-2 mb-2">
          <UserTag
            data={{
              avatar: "",
              follow: 123,
              articleNum: 123,
              userName: "影视大全吧",
            }}
            flag
          ></UserTag>
        </View>
        <View className="relative h-1 rounded-md">
          <View className="absolute inset-0 rounded-md bg-[#262626] w-full"></View>
          <View
            style={{ width: progress + "%" }}
            className="absolute inset-0 rounded-md bg-[#DFDFDF]"
          ></View>
        </View>
      </View>
      <View className=" absolute inset-0 -z-1 flex justify-center items-center">
        {/* <Video id={videoId} className="w-full" {...settings} /> */}
      </View>
    </View>
  );
};
